.bui-alert {
  --content-marquee-speed: var(--bui-alert-content-marquee-speed, 10s);
  --padding: var(--bui-alert-padding, 8px);
  --line-height: var(--bui-alert-line-height, 16px);
  --default-icon-font-size: var(--bui-alert-default-icon-font-size, 15px);
  --action-margin-left: var(--bui-alert-action-margin-left, 16px);
  --icon-margin-right: var(
    --bui-alert-icon-margin-right,
    var(--bui-spacing-xs)
  );
  --icon-font-size: var(--bui-alert-icon-font-size, var(--bui-title-size-4));
  display: flex;
  padding: var(--padding);
  border-radius: var(--bui-shape-radius-default);
  align-items: center;
  line-height: var(--line-height);
  font-size: var(--bui-text-size-3);
  font-family: var(--bui-font-family);

  &-standard {
    &-primary {
      background-color: var(--bui-color-primary-light);
      color: var(--bui-color-primary);
    }

    &-success {
      background-color: var(--bui-color-success-light);
      color: var(--bui-color-success);
    }

    &-info {
      background-color: var(--bui-color-info-light);
      color: var(--bui-color-info);
    }

    &-danger {
      background-color: var(--bui-color-danger-light);
      color: var(--bui-color-danger);
    }

    &-warning {
      color: var(--bui-color-warning);
      background-color: var(--bui-color-warning-light);
    }
  }

  &-outlined {
    &-primary {
      border: 1px solid var(--bui-color-primary);
      color: var(--bui-color-primary);
    }

    &-success {
      border: 1px solid var(--bui-color-success);
      color: var(--bui-color-success);
    }

    &-info {
      border: 1px solid var(--bui-color-info);
      color: var(--bui-color-info);
    }

    &-danger {
      border: 1px solid var(--bui-color-danger);
      color: var(--bui-color-danger);
    }

    &-warning {
      border: 1px solid var(--bui-color-warning);
      color: var(--bui-color-warning);
    }
  }

  &-default-icon {
    font-size: var(--default-icon-font-size);
  }

  &-content {
    flex-grow: 1;
  }

  &-action {
    // fix 小程序上dom被压缩
    flex-shrink: 0;
    margin-left: var(--action-margin-left);
    word-wrap: keep-all;
    font-size: var(--bui-text-size-3);
    cursor: pointer;
    text-align: center;
  }

  &-action.bui-icon-btn {
    padding: 0;
  }

  &-icon {
    display: flex;
    align-items: center;
    margin-right: var(--icon-margin-right);
    vertical-align: middle;
    font-size: var(--icon-font-size);
    cursor: pointer;
  }

  &-marquee {
    overflow: hidden;

    &-content {
      display: inline-block;
      padding-left: 100%;
      white-space: nowrap;
      animation: marquee var(--content-marquee-speed) linear infinite both;
    }
  }

  @keyframes marquee {
    100% {
      transform: translateX(-100%);
    }
  }
}
